<template>
	<view class="content">
	  <view class="my-info">
		  <image class="myPhoto" :src="userInfo.avatar" mode=""></image>
		  <view class="myInfo">
		  	<view class="name">{{userInfo.nickname?userInfo.nickname:'默认名称'}}</view>
		  	<!-- <view class="phone">155****5655</view> -->
		  </view>
		  <view class="editor" @click="goModify">
		    <uni-icons type='compose' size='16'></uni-icons>	
		  </view>
	  </view>
	  <view class="my-car-tip">
		  <view class="tip-left">我的车辆</view>
		  <view class="tip-right" @click="goMyCarts">管理</view>
	  </view>
	  <view class="my-car-info">
	  	<image class="my-car-photo" v-if='cartInfo.cartImg' :src="cartInfo.cartImg" mode="scaleToFill"></image>
		<view class="my-car-text" v-else >
			你还没有设置默认车辆! 点击<text  @click="goMyCarts" style="color: #02B1AA;">管理</text>,去设置默认车辆
		</view>
		<view class="info-item">
			<text class="title">车牌号</text>
			<text class="value">{{cartInfo.licensePlate?cartInfo.licensePlate:'暂无'}}</text>
		</view>
		<view class="info-item">
			<text class="title">颜色</text>
			<text class="value">{{cartInfo.cartColor?cartInfo.cartColor:'暂无'}}</text>
		</view>
		<view class="info-item">
			<text class="title">车型</text>
			<text class="value">{{cartInfo.cartType?cartInfo.cartType:'暂无'}}</text>
		</view>
	  </view>
	  <view class="soli-item">
	  	<text class="title">用户协议</text>
	  	<uni-icons class="value" type="right" size="16"></uni-icons>
	  </view>
	  <view class="soli-item" @click="goPage('ystk')">
	  	<text class="title">隐私协议</text>
	  	<uni-icons class="value" type="right" size="16"></uni-icons>
	  </view>
	</view>
</template>

<script>
	import { myInfo} from "@/untils/api"
	export default {
		data() {
			return {
				cartInfo:{
					cartImg:'',
				},
				userInfo:null
			}
		},
		onShow(){
			this.cartInfo.cartImg = this.$getImageSrc('baner.png')
			this.getMyInfo()
		},
		methods: {
			goPage(name){
			  uni.navigateTo({
				  url:'/subpackage/mine/'+name
			  })	
			},
		  goMyCarts(){
			uni.navigateTo({
				url:'/subpackage/mine/myCars'
			})	
		  },
		  getMyInfo(){
			let userInfo = this.$getStorageSync('userInfo') || {}
			this.userInfo = userInfo
			if(!this.userInfo.avatar){
				this.userInfo.avatar = 'https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132'
			}
			myInfo().then((res) => {
				this.cartInfo = res.data
				// this.cartInfo.cartImg = ''
				this.$setStorageSync('defaultCart', res.data)
			})  
		  },
		  goModify(){
			 uni.navigateTo({
			 	url:'/subpackage/mine/modifyInfo'
			 })	 
		  }
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		height: 100%;
		background-image: url('https://static.myxiangyu.com/image/bg/bg_mine.png');
		background-color: #F7F7F7;
		background-repeat:no-repeat;
		background-position: top;
		background-size: 100%;
		overflow: auto;
		position: relative;
		.my-info{
			width: 686rpx;
			margin: 0 auto;
			margin-top: 200rpx;
			overflow: hidden;
			height: 140rpx;
			margin-bottom: 40rpx;
			.myPhoto{
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				border: 1px solid #fff;
				float: left;
			}
			.myInfo{
				color: #11113A;
				margin-left: 30rpx;
				float: left;
				.name{
					font-size: 32rpx;
					font-weight: 800;
					line-height: 120rpx;
				}
				.phone{
					font-size: 24rpx;
				}
			}
			.editor{
				margin-top: 30rpx;
				width: 130rpx;
				text-align: center;
				float: left;
			}
		}
		.my-car-tip{
			width: 686rpx;
			margin: 0 auto;
			height: 88rpx;
			background: linear-gradient( 180deg, rgba(2,177,170,0.12) 0%, rgba(0,214,142,0) 60%);
			border-radius: 24rpx 24rpx 0rpx 0rpx;
			display: flex;
			justify-content: space-between;
			.tip-left{
				line-height: 98rpx;
				font-size: 32rpx;
				text-indent: 30rpx;
			}
			.tip-right{
				background-image: url('https://static.myxiangyu.com/image/bg/mine_ic_more.png');
				background-size: 100%;
				width: 160rpx;
				height: 72rpx;
				font-size: 28rpx;
				color: #fff;
				line-height: 56rpx;
				text-align: center;
			}
		}
		.my-car-info{
			width: 686rpx;
			background: #fff;
			margin: 30rpx auto 20rpx;
			border-radius: 20rpx;
			text-align: center;
			.my-car-photo{
			  width: 686rpx;
			  height: 200rpx;
			  margin: -20rpx auto 0;
			  border-radius: 20rpx;
			}
			.my-car-text{
				width: 686rpx;
				height: 200rpx;
				margin: -20rpx auto 0;
				border-radius: 20rpx;
				font-size: 30rpx;
				color: #666;
				display: flex;
				justify-content: center;
				align-items: center;
				text-align: center;
			}
			
			.info-item{
				height: 80rpx;
				line-height: 80rpx;
				border-bottom: 1rpx solid #F9F9F9;
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 28rpx;
				.title{
					color: #AEB3B3;
					text-indent: 20rpx;
				}
				.value{
					color: #2A2B2B;
					margin-right: 20rpx;
				}
			}
		}
		.soli-item{
			width: 686rpx;
			height: 96rpx;
			margin: 0 auto 40rpx;
			line-height: 96rpx;
			color: #2A2B2B;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-radius: 20rpx;
			background: #fff;
			font-size: 30rpx;
			.title{
				text-indent: 20rpx;
			}
			.value{
				margin-right: 20rpx;
				color: #2A2B2B;
			}
		}
	}
</style>
